<template>
  <drop-wrap :data="data" :index="index" :element="element">
    <div :class="[
        'operations-group-container',
      ]">
      <draggable v-model="element.columns" :no-transition-on-drag="true" v-bind="{
          group: 'site',
          ghostClass: 'ghost',
          animation: 200,
          handle: '.mover',
        }" @add="handleContainerAdd($event)">
        <transition-group name="fade" tag="div" v-drop-blank class="operations-group" :style="style">
          <widget  :style="widgetStyle"  v-for="(el, i) in element.columns" :element="el" :index="i" :key="el.key || Math.random() * 5" :data.sync="element.columns"></widget>
        </transition-group>
      </draggable>
    </div>
  </drop-wrap>
</template>

<script>
  import clone from 'clone'
  import Draggable from 'vuedraggable'
  export default {
    inject: ['model'],
    props: ['element', 'data', 'index'],
    data () {
      return {}
    },
    computed: {
      store () {
        return this.element.getRoot();
      },
      style () {
        let direction = ""
        if (this.element.options.align == 'left') {
          direction = "flex-start"
        } else if (this.element.options.align == 'right') {
          direction = "flex-end"
        } else {
          direction = "center"
        }
        return {
          marginTop: this.element.options.marginTop + 'px',
          marginBottom: this.element.options.marginBottom + 'px',
          overflow: 'hidden',
          justifyContent: direction
        }
      },
      widgetStyle(){
        let gutter= Number(this.element.options.gutter)/2 
        return {
          margin: `0px  ${gutter}px `,
        }   
      }
    },
    components: { Draggable },
    methods: {
      handleContainerAdd (evt) {
        const newIndex = evt.newIndex

        if (this.element.columns[newIndex]['type'] !== 'sbutton') {
          this.store.delComponentMap(this.element.columns[newIndex])
          this.element.columns.splice(newIndex, 1)
          this.$message({
            showClose: true,
            message: "只允许拖拽按钮组件",
            type: "error",
          });
          return false
        }

        this.$set(
          this.element.columns,
          newIndex,
          this.store.generateComponent({
            ...clone(this.element.columns[newIndex]),
          })
        )
        this.store.current = this.element.columns[newIndex]
        this.$handleStack.push(clone(this.store.root))
      },
    },
  }
</script>

<style lang="scss" scoped>
.operations-group-container>div {
  min-height:50px;
}
.operations-group {
  min-height:50px;
  padding-bottom: 12px;
  display: flex;
  & > div {
  }
}
</style>
